import React from 'react';
import { Route, Routes, Navigate } from 'react-router-dom';
import { useLocation, useNavigate } from 'react-router-dom';
import { SubPageLayout } from '../components';
import {
  GlobalOutlined,
  DatabaseOutlined,
  SecurityScanOutlined,
  BarChartOutlined,
  SettingOutlined,
} from '@ant-design/icons';

// 站点管理子页面
import SiteList from '../views/sites/SiteList';
import DomainManage from '../views/sites/DomainManage';

// 占位页面组件 - 后续可以创建具体实现
const SSLConfig: React.FC = () => (
  <div style={{ textAlign: 'center', padding: '50px' }}>
    <h2 style={{ fontSize: '24px', fontWeight: 600, color: '#333', marginBottom: '8px' }}>SSL配置</h2>
    <p style={{ color: '#666' }}>SSL配置功能正在开发中...</p>
  </div>
);

const SiteAnalytics: React.FC = () => (
  <div style={{ textAlign: 'center', padding: '50px' }}>
    <h2 style={{ fontSize: '24px', fontWeight: 600, color: '#333', marginBottom: '8px' }}>访问统计</h2>
    <p style={{ color: '#666' }}>访问统计功能正在开发中...</p>
  </div>
);

const SiteSettings: React.FC = () => (
  <div style={{ textAlign: 'center', padding: '50px' }}>
    <h2 style={{ fontSize: '24px', fontWeight: 600, color: '#333', marginBottom: '8px' }}>站点设置</h2>
    <p style={{ color: '#666' }}>站点设置功能正在开发中...</p>
  </div>
);

const SitesRouter: React.FC = () => {
  const navigate = useNavigate();
  const location = useLocation();

  // 侧边栏菜单配置
  const menuItems = [
    {
      key: '/app/sites',
      icon: <GlobalOutlined />,
      label: '站点列表',
    },
    {
      key: '/app/sites/domains',
      icon: <DatabaseOutlined />,
      label: '域名管理',
    },
    {
      key: '/app/sites/ssl',
      icon: <SecurityScanOutlined />,
      label: 'SSL配置',
    },
    {
      key: '/app/sites/analytics',
      icon: <BarChartOutlined />,
      label: '访问统计',
    },
    {
      key: '/app/sites/settings',
      icon: <SettingOutlined />,
      label: '站点设置',
    },
  ];

  const handleMenuClick = ({ key }: { key: string }) => {
    navigate(key);
  };

  return (
    <SubPageLayout
      menuItems={menuItems}
      selectedKeys={[location.pathname]}
      onMenuClick={handleMenuClick}
      defaultCollapsed={false}
    >
      <Routes>
        {/* 站点列表（首页） */}
        <Route index element={<SiteList />} />
        
        {/* 域名管理 */}
        <Route path="domains" element={<DomainManage />} />
        
        {/* SSL配置 */}
        <Route path="ssl" element={<SSLConfig />} />
        
        {/* 访问统计 */}
        <Route path="analytics" element={<SiteAnalytics />} />
        
        {/* 站点设置 */}
        <Route path="settings" element={<SiteSettings />} />

        {/* 其他未匹配的路由重定向到首页 */}
        <Route path="*" element={<Navigate to="/app/sites" replace />} />
      </Routes>
    </SubPageLayout>
  );
};

export default SitesRouter; 